<template>
	<el-container>
		<el-header>
			<el-link style="float: left; margin-left: 50px; font-size: 25px;" @click="toIndex" target="_blank">众筹网首页
			</el-link>
			<el-link style="float: right; margin-right: 50px; font-size: 25px;" v-show="user==''" @click="toLogin"
				target="_blank">请登录</el-link>
			<el-link style="float: right; margin-right: 50px; font-size: 25px;" v-show="user!=''" @click="toMember"
				target="_blank">个人中心</el-link>
		</el-header>
		<div style="width:1100px; height: 100%; margin: 30px auto; background-color: #EBEEF5; border-radius: 45px; ">
			<!-- 头部 style="border: #222D32 solid; "-->
			<div>
				<el-row>
					<el-col style="background-color:#EBEEF5; border-radius: 5px; " :span="23">
						<div class="grid-content bg-purple-dark" style="margin-left: 30px ;width: 100%; ">
							<h2 style="font-size: 35px !important;">{{item.iname}}</h2>
							<el-col>
								<div class="grid-content bg-purple" style="width: 100%;">
									<h5 style="font-size: 18px !important;">项目介绍：{{item.iintro}}</h5>
									<div class="grid-content bg-purple-light"
										style=" float: right;line-height: 10px; margin-bottom: 10px;">
										     <el-button type="info" round @click="onsuch" v-if="bs==1"><i
												class="el-icon-star-on"></i>收藏人数{{item.gzcount}}</el-button>
										<el-button type="success" round @click="onsuch" v-else><i
												class="el-icon-star-on"></i>收藏人数{{item.gzcount}}</el-button>
									</div>
								</div>

							</el-col>
							<el-col :span="7">

							</el-col>
						</div>
					</el-col>
				</el-row>
			</div>



			<!-- 底部 -->
			<el-row>
				<!-- 左侧 -->
				<!-- 广告图片展示-->
				<el-col :span="16">
					<div class="grid-content bg-purple" style=" width: 730px; height: 1500px;">
						<div>
							<el-image style="width: 680px; height: 500px;border-radius: 45px; margin-left: 30px;"
								:src="imgurl+item.iimg"></el-image> 
						</div>
						<div style="margin-top: 40px;">
							<el-image style="width: 680px; height: 500px;border-radius: 45px; margin-left: 30px;"
								:src="imgurl+item.ishowimg"></el-image> 
						</div>
						<!-- 显示广告最下方的项目回报内容 -->
						<div style="width: 100%;">
							<h3 align="center" style="font-size: 26px; color: green;">众筹回报</h3>
							<div class="flx-c">
								<div class="xx" v-for="xx in rewards" style="width: 500px; border-radius: 15px;">
									<el-row>
										<el-col :span="24">
											<div class="grid-content bg-purple-dark" style="margin-left: 10px;">
												<h3>￥{{xx.paymoney}}
													<span
														style="float:right;font-size:12px; margin-right: 15px;">无限额,等待你的支持</span>
												</h3>
											</div>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="24">
											<div class="grid-content bg-purple-dark" style="margin-left: 10px;">
												<h6>配送费用：(<span style="font-size:15px;" v-if="xx.yf==0">免运费</span>
													<span style="font-size:15px;" v-else>{{xx.yf}}</span>)
												</h6>
												<h6>预计发放时间：项目筹款成功后的{{xx.rewardtime}}天内</h6>
												<h6>{{xx.rewardcontext}}</h6>
											</div>
										</el-col>
									</el-row>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<!-- 右侧 -->
				<el-col :span="8">
					<div class="grid-content bg-purple-light" style="border:1px solid #DDDDDD; width: 350px;">
						<!-- 右侧头部 -->
						<el-row>
							<div style="margin-left: 20px;">
								<el-col :span="24">
									<div class="grid-content bg-purple-dark" style="width: 350px;">

										<div id="section-1" style="border-bottom:1px dashed #ddd;margin-top: 15px;">
											<span style="font-size:20px;font-weight:bold;">已筹资金：￥{{item.nmoney}}</span>
											(<span style="font-size:15px;" v-show="item.percentage!=100">众筹中</span>
											<span style="font-size:15px;" v-show="item.percentage==100">众筹结束</span>)
											<br />
											<p>
												<span style="font-size:15px;">目标金额:{{item.amoney}}</span>
												<span style="font-size:15px; margin-left: 150px;"
													v-if="item.percentage>=100">达成100%</span>
												<span style="font-size:15px; margin-left: 150px;"
													v-else>达成{{item.percentage}}%</span>
											</p>

										</div>
										<!-- 进度条 -->

										<el-progress
											style="border: #9FD0DB 1px solid; border-radius: 13px; width: 300px;"
											:text-inside="true" :stroke-width="25" :percentage="item.percentage">
										</el-progress>
										<h2>剩余{{item.idays}}天</h2>
										<h6>已有{{item.haveman}}人支持</h6>
										<el-button type="warning" @click="zc=true"
											style="text-align: center; width: 300px; display: block; ">
											立即支持
										</el-button>
										<br>
									</div>
								</el-col>
							</div>
						</el-row>
						<!-- 右侧底部 -->
					</div>

					<!-- 广告1 -->
					<div style="border:1px solid #DDDDDD;" v-for="ww in rewards">
						<el-row>
							<el-col :span="24">
								<div class="grid-content bg-purple-dark;padding-left: 10px; ">
									<h3>￥{{ww.paymoney}}
										<span style="float:right;font-size:12px; margin-right: 15px;">无限额,等待你的支持</span>
									</h3>
								</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div class="grid-content bg-purple-dark" style="padding-left: 10px;">

									<div>

										配送费用:<span style="font-size:15px;" v-show="ww.yf==0">免运费</span>
										<span style="font-size:15px;" v-show="ww.yf!=0">{{ww.yf}}</span>
									</div>

									<h6>预计发放时间：项目筹款成功后的{{ww.rewardtime}}天内</h6>
									<el-button type="warning" @click="tiaozhuan(ww)"
										style="text-align: center; width: 80px; margin-left:40px ;">
										支持
									</el-button>
									<h6>{{ww.rewardcontext}}</h6>
								</div>
							</el-col>
						</el-row>
					</div>


					<!-- 风险提示 -->
					<div style="margin: 20px;"></div>
					<div style="border: solid red 1px; border-radius: 10px;">
						<el-row>
							<el-col :span="24">
								<div class="grid-content bg-purple-dark">
									<h3 style="color: red;">风险提示</h3>
								</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col>
								<div class="grid-content bg-purple-dark"
									style="font-size: 12px; width: 100%;line-height: 20px; ">
									<p>&nbsp;&nbsp;&nbsp;&nbsp;1.众筹并非商品交易，存在一定风险。支持者根据自己的判
										断选择、支持众筹项目，与发起人共同实现梦想并获
										得发起人承诺的回报。</p>
									<p>&nbsp;&nbsp;&nbsp;&nbsp;2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。
									</p>
									<p>&nbsp;&nbsp;&nbsp;&nbsp;3.本项目必须在2017-06-09之前达到￥10000.00
										的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。</p>
									<p>&nbsp;&nbsp;&nbsp;&nbsp;4.请在支持项目后15分钟内付款，否则您的支持请求会被自动关闭。</p>
									<p>&nbsp;&nbsp;&nbsp;&nbsp;5.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。
									</p>
									<p>&nbsp;&nbsp;&nbsp;&nbsp;6.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容</p>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-col>
			</el-row>

			<el-dialog title="" :visible.sync="zc" width="900px">
				<el-container>

					<el-aside class="sdel-aside" width="100px">
						<div v-for="ee in rewards">
							<el-tag class="sdel-tag">￥{{ee.paymoney}}</el-tag><br />
						</div>
					</el-aside>


					<el-main>
						<div v-for="aa in rewards">
							<h2 id="section-1" style="border-bottom:1px dashed #ddd;"><span
									style="font-size:20px;font-weight:bold;">￥{{aa.paymoney}}</span><span
									style="font-size:12px;margin-left:60px;">无限额，{{item.haveman}}位支持者</span></h2>
							<p>配送费用：(<span style="font-size:15px;" v-if="aa.yf==0">免运费</span>
								<span style="font-size:15px;" v-else>{{aa.yf}}</span>)
							</p>
							<p>预计发放时间：项目筹款成功后的{{aa.rewardnum}}天内</p>
							<el-button type="primary" @click="tiaozhuan(aa)">支持</el-button>
							<br>
							<p>
								{{aa.rewardcontext}}
							</p>
							<hr>
						</div>

					</el-main>
				</el-container>
			</el-dialog>
		</div>
	</el-container>

</template>




<script>
	export default {
		data() {

			return {
				user: '',
				item: {},
				num: 0,
				rewards: [],
				imgurl: 'http://localhost:8888/crowdfunding_system_war_exploded/showImg?filename=',
				zc: false,
				bs: 0,
				iid: ''
			}
		},
		methods: {
			async selectByuidAndiid() {
				let userid = window.sessionStorage.getItem("userid");
				var itid = this.iid;
				var res = await this.$http.get("selectByuidAndiid?userid=" + userid + "&iid=" + itid);
				if (res.data.data == 1) {
					this.bs = 2
				} else {
					this.bs = 1
				}
			},
			async getUser() {
				// 获取user对象
				let id = window.sessionStorage.getItem("userid");
				let res = await this.$http.get("selectById?id=" + id);
				console.log(res.data.data)
				this.user = res.data.data;
			},
			async seleItem() {
				// 需要通过路由传值，将点击的项目IID传过来
				var res = await this.$http.post("selectRewardAndItem?iid=" + this.iid);
				this.item = res.data.data;
				this.rewards = this.item.rewards;
				console.log(this.rewards)

			},
			tiaozhuan(sd) {
				let itemqs = JSON.stringify(this.item);
				let re = JSON.stringify(sd);
				console.log(re)
				this.$router.push({
					path: '/pay_step_1',
					query: {
						ii: itemqs,
						rr: re
					}
				})
			},
			async onsuch() {
				let userid = window.sessionStorage.getItem("userid");
				var itid = this.item.iid;
				/* console.log(itid)
				console.log(userid) */
				var res = await this.$http.post("updategz?userid=" + userid + "&iid=" + itid);
				this.bs = res.data.data;
				// console.log(this.bs);
				this.seleItem();
			},
			toLogin() {
				this.$router.push('/login')
			},
			toMember() {
				this.$router.push('/member')
			},
			toIndex() {
				this.$router.push("/index")
			}
		},
		mounted() {
			this.iid = this.$route.params.iid;
			this.seleItem();
			this.getUser();
			this.selectByuidAndiid();
		}
	}
</script>



<style scoped="scoped">
	.el-header {
		background-color: darkgrey;
		line-height: 60px;
	}

	.sdel-aside {
		background-color: #ECF0F5;
	}

	.sdel-tag {
		margin-top: 10px;
		margin-right: 40px;
		width: 80px;
	}

	.el-icon-star-on {}

	/* .el-main {
		height: 500px;
	} */
	.flx-c {
		width: 100%;
		height: 500px;
		display: flex;

		justify-content: space-around;
		flex-wrap: wrap;
	}

	.xx {
		width: 300px;
		height: 216px;
		border: solid 1px yellowgreen;
		background-color: palegreen !important;

	}
</style>
